<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<title>拓扑test</title>
<meta charset="UTF-8">

<script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/go.js"></script>
</head>

<body>
	<div id="sample" style="padding: 5px;">
		<div id="myDiagramDiv"
			style="border: solid 1px black; width: 80%; height: 400px"></div>
		<button onclick="load()">Load</button>
		<textarea id="mySavedModel" style="width: 100%; height: 300px"
			class="hide">
			{ "nodeDataArray": [
			{"key":"1", "text":"Switch 23", "type":"S2", "loc":"195 225"},
			{"key":"2", "text":"Machine 17", "type":"M4", "loc":"183.5 94"},
			{"key":"3", "text":"Panel 7", "type":"P2", "loc":"75 211.5"},
			{"key":"4", "text":"Switch 24", "type":"S3", "loc":"306 225"},
			{"key":"5", "text":"Machine 18", "type":"M5", "loc":"288.5 95"},
			{"key":"6", "text":"Panel 9", "type":"P1", "loc":"426 211"},
			{"key":"7", "text":"Instr 3", "type":"I1", "loc":"-50 218"} ],
			  "linkDataArray": [
			{"from":"1", "to":"2"},
			{"from":"1", "to":"3"},
			{"from":"1", "to":"4"},
			{"from":"4", "to":"5"},
			{"from":"4", "to":"6"},
			{"from":"7", "to":"2"},
			{"from":"7", "to":"3"}
			 ]}
		 </textarea>
	</div>

	<script id="code">
    function init() {
      
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv",
          { "animationManager.isEnabled": false,
            initialContentAlignment: go.Spot.Center
          });

      // conversion functions for Bindings in the Node template:

      function nodeTypeImage(type) {
        switch (type) {
          case "S2": return "img/voice atm switch.jpg";
          case "S3": return "img/server switch.jpg";
          case "P1": return "img/general processor.jpg";
          case "P2": return "img/storage array.jpg";
          case "M4": return "img/iptv broadcast server.jpg";
          case "M5": return "img/content engine.jpg";
          case "I1": return "img/pc.jpg";
          default: return "img/pc.jpg";
        }
        if (type.charAt(0) === "S") return
        if (type.charAt(0) === "P") return "img/general processor.jpg";
        if (type.charAt(0) === "M")
        return "img/pc.jpg";
      }

      function nodeProblemConverter(msg) {
        if (msg) return "red";
        return null;
      }

      myDiagram.nodeTemplate =
        $(go.Node, "Vertical",
          { locationObjectName: "ICON" },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Panel, "Spot",
            $(go.Panel, "Auto",
              { name: "ICON" },
              $(go.Shape,
                { fill: null, stroke: null} 
                ),
              $(go.Picture,
                { margin: 5 },
                new go.Binding("source", "type", nodeTypeImage))
            )  // end Auto Panel                    
          ),  // end Spot Panel
          $(go.TextBlock,
            new go.Binding("text"))
        );  // end Node


      // conversion function for Bindings in the Link template:

      function linkProblemConverter(msg) {
        return "gray";
      }

      myDiagram.linkTemplate =
        $(go.Link, go.Link.AvoidsNodes,
          { corner: 3 },
          $(go.Shape,
            { strokeWidth: 2, stroke: "gray" },
            new go.Binding("stroke", "problem", linkProblemConverter))
        );

      load();
    }

    function load() {
      myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    }
    
    init();
  </script>
</body>
</html>